import { useEffect, useState } from "react";
import "./index.less";
import { useNavigate, useLocation } from "react-router-dom";
import TypeOrganization from "./homeContent/typeOrganization";
import TypeUser from "./homeContent/typeUser";
import { getWhetherAuthorize } from "./service";
import { getCurrentUserInfo } from "@/utils/authority";

const HomePage: React.FC = () => {
  const location = useLocation();
  const navigate = useNavigate();
  const goto = () => {
    if (userType == "居民" || userType == "去认证") {
      navigate("/authentication");
    }
  };
  const [Type, setType] = useState("");
  const [userType, setUserType] = useState("");
  const getUserType = async () => {
    try {
      const { data } = await getWhetherAuthorize({
        userId: getCurrentUserInfo()?.data?.id,
      });
      setType(data?.whetherServiceCompany);
      setUserType(data?.whetherAuthorize == "0" ? "去认证" : data?.roleName);
    } catch {}
  };
  useEffect(() => {
    getUserType();
  }, []);
  useEffect(() => {
    if (userType === "去认证") {
      document.body.addEventListener("click", handleClick, true);
    }
    return () => {
      document.body.removeEventListener("click", handleClick, true);
    };
  }, [userType]);
  const handleClick = (event) => {
    event.stopPropagation();
    event.preventDefault();
    navigate("/authentication");
  };

  return (
    <div className="homePage-contarnier">
      <div className="header">
        <div className="homePage-headerLeft" onClick={() => goto()}>
          {userType}
        </div>
        <p>首页</p>
      </div>
      {Type && userType != "演示角色" ? <TypeOrganization /> : <TypeUser />}
    </div>
  );
};

export default HomePage;
